import React, { ReactElement, useRef, useState, useEffect } from 'react';
import { Button, message, Tree } from 'antd';
import { getMenu } from '@/api/menu';
import { getMenuByRoleId } from '@/api/role';
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormTextArea,
} from '@ant-design/pro-form';
interface Props {
  reload: () => void;
  record: any;
  visible: boolean;
  close: () => void;
}
import { updateServiceType, getServiceType } from '@/api/service-type';
export default function UpdateServe({
  reload,
  record,
  close,
  visible,
}: Props): ReactElement {
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['']);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const formRef = useRef();

  //获取树形空间所需求的数据
  useEffect(() => {
    getServeType();
  }, []);

  const [treeData, setTreeData] = useState<any[]>([]);
  const getServeType = async () => {
    const res = await getServiceType({});
    // console.log(res, 'res');

    if (res.status == 200) {
      // console.log(res.data.rows.children, 'menu');
      setTreeData([...res.data.rows.children]);
    }
  };

  interface IValue {
    title: string; //	角色名称
  }
  const updateServeAsync = async (values: IValue) => {
    let data = {
      id: record.id.toString(),
      name: values.title,
      parentId: '0',
    };
    // console.log(data, '111');
    if (checkedKeys.length > 2) {
      message.error('只能选择一个上级部门');
    } else {
      if (checkedKeys.length == 2) {
        data = {
          ...data,
          parentId: checkedKeys[1].toString(),
        };
      }
      // console.log(data, 'updata');

      const res = await updateServiceType(data);
      if (res.status == 200) {
        setCheckedKeys(['']);
        reload();
        close();
        message.success('修改部门成功');
        return true;
      } else {
        message.error('修改部门失败');
      }
    }
  };

  const onCheck = (checkedKeysValue: any) => {
    setCheckedKeys(checkedKeysValue.checked);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    // console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };
  return record.id ? (
    <DrawerForm<{
      title: string;
      company: string;
    }>
      width={500}
      title="修改角色"
      formRef={formRef}
      // trigger={<SettingOutlined key="editable" style={{ color: '#4A9FF5' }} />}
      visible={visible}
      onVisibleChange={async (visible) => {
        if (visible) {
          await getServeType();
        } else {
          close();
        }
      }}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        // await waitTime(2000);
        // console.log(values, 'sss');

        const data = await updateServeAsync(values);
        // console.log(data, 'data');
        // message.success('提交成功');
        // 不返回不会关闭弹框
        // return true;
      }}
      initialValues={record}
    >
      <ProFormText
        name="title"
        width="md"
        label="角色名称："
        tooltip="最长为 24 位"
        placeholder="请输入名称"
      />
      <ProFormSelect label="权限选择">
        <Tree
          checkable
          // onExpand={onExpand}
          // expandedKeys={expandedKeys}
          autoExpandParent={true}
          onCheck={onCheck}
          checkStrictly
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={treeData}
        />
      </ProFormSelect>
    </DrawerForm>
  ) : (
    <></>
  );
}
